import React, { Component } from 'react';
import { Table, Pagination, Message, Dialog, Button, Balloon } from '@alifd/next';
import IceContainer from '@icedesign/container';
import moment from 'moment';
import TableFilter from './TableFilter';
import { ApiOfMonitorDataPage } from '#/utils/coreApiDefine'
import SearchTableWrapper from '#/hoc/SearchTableWrapper'

@SearchTableWrapper(ApiOfMonitorDataPage, {lazyRequest: true})
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor() {
    super();
    this.state = {
    };
  }

  renderData = (value, index, item) => {
    let that = this;
    if (!item.data) {
      return (
        <div></div>
      );
    } else {
      let data = JSON.parse(item.data);
      return (
        <div>
          {Object.keys(data).map(function (k, i) {
            return (
              <dl style={that.props.styles.horizontal.dl} key={k}>
                <dt style={that.props.styles.horizontal.dt}>{k}</dt>
                <dd style={that.props.styles.horizontal.dd}>{data[k]}</dd>
              </dl>
            );
          })}
        </div>
      );
    }
  }

  renderTime = time => {
    return (
      <div>{moment(time).format('YYYY-MM-DD HH:mm:ss')}</div>
    );
  }

  render() {
    const { instances } = this.props.bindingData;
    console.log(instances)
    const PaginationBlock = <Pagination
      style={this.props.styles.pagination}
      shape="arrow-only"
      pageSizeSelector="filter"
      current={this.props.page}
      total={instances.pageable.totalElements}
      totalRender={total => `总数: ${total}`}
      pageSize={instances.pageable.size}
      onChange={this.props.handlePaginationChange}
      onPageSizeChange={this.props.handlePageSizeChange}
    />
    return (
      <IceContainer style={this.props.styles.container}>
        <TableFilter
          filter={this.props.filter}
          match={this.props.match}
        />
        {PaginationBlock}
        <Table
          dataSource={instances.data}
          loading={this.props.loading}
          hasBorder={false}
          style={{ padding: '0 20px 20px' }}
          onSort={this.props.handleSort}
        >
          <Table.Column width={200} title="资源名称" dataIndex="resourceName" sortable={true} />
          <Table.Column width={140} title="采集时间" dataIndex="collectedTime" cell={this.renderTime} sortable={true} />
          <Table.Column
            title="采集数据"
            dataIndex="data"
          />
        </Table>
        {PaginationBlock}
      </IceContainer>
    );
  }
}


